<template>
  <div class="container">
    <div class="table-wrap">
      <div class="header">
        <div class="tab-wrap">
          <div
            @click="handleBtn(1)"
            :class="{ abled: isActived == 1 }"
            class="tab"
          >
            批发市场
          </div>
          <div
            @click="handleBtn(2)"
            :class="{ abled: isActived == 2 }"
            class="tab"
          >
            农贸市场
          </div>
        </div>
      </div>
      <div class="table">
        <div class="tab">
          <span class="sort">经营户</span>
          <span class="name">商品名称</span>
          <span class="project">检测项目</span>
          <span class="result">检测结果</span>
          <span class="type">检测方式</span>
          <span class="time">检测时间</span>
        </div>
        <el-scrollbar
          element-loading-background="transparent"
          v-loading="loading"
          ref="scrollArea"
          class="scroll-container"
          @mouseenter="stopScroll"
          @mouseleave="startScroll"
        >
          <div class="item-wrap">
            <div v-for="(item, index) in tabList" :key="index" class="item">
              <span class="sort">{{ item.lianxir }}</span>
              <span class="name">{{ item.ypmc }}</span>
              <span class="project">{{ item.jcxm }}</span>
              <span class="result">{{ item.jcjg }}</span>
              <span class="type">{{ item.jcfsqb }}</span>
              <span class="time">{{ item.jcsj.slice(0, 10) }}</span>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import { getCXGSByMarket, getJYCX, getJCSC, getNMSC } from "@/apis/subjectInfo";
import { useRouter } from "vue-router";
const boyUrl = ref("src/assets/images/ztxx/boy.png");
const girlUrl = ref("src/assets/images/ztxx/girl.png");
let loading = ref(false);
const router = useRouter();
const tabList = ref();
const isActived = ref(1);
const getInfo = () => {
  loading.value = true;
  tabList.value = null;
  getJCSC().then((res) => {
    tabList.value = res.data;
    loading.value = false;
  });
};
getInfo();

const handleBtn = (e) => {
  isActived.value = e;
  if (e == 2) {
    loading.value = true;
    tabList.value = null;
    getNMSC().then((res) => {
      tabList.value = res.data;
      loading.value = false;
    });
  } else {
    getInfo();
  }
};

const scrollArea = ref(null);
let timer = null;
const SCROLL_SPEED = 1; // 每次滚动的像素数，可以根据需要调整

const startScroll = () => {
  if (timer) {
    clearInterval(timer);
  }
  timer = setInterval(() => {
    // 获取滚动容器
    const container = scrollArea.value.$el.querySelector(".el-scrollbar__wrap");
    // 判断是否已滚动到底部
    if (
      container.scrollHeight - (container.scrollTop + container.clientHeight) <=
      0
    ) {
      // 滚动到顶部
      container.scrollTop = 0;
    } else {
      // 向下滚动
      container.scrollTop += SCROLL_SPEED;
    }
  }, 40); // 根据需要调整滚动间隔
};

const stopScroll = () => {
  if (timer) {
    clearInterval(timer);
  }
};

onMounted(() => {
  startScroll();
});

onUnmounted(() => {
  stopScroll();
});
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  .table-wrap {
    padding-top: 20px;
    .header {
      width: 100%;
      height: 27px;
      text-align: center;
      .tab-wrap {
        display: flex;
        justify-content: center;
        .tab {
          font-size: 16px;
          border: 1px solid #fff;
          padding: 2px 25px;
          color: #fff;
        }
        .abled {
          background: #c0edff;
          font-family: SourceHanSansCN, SourceHanSansCN;
          font-weight: 800;
          // font-size: 17px;
          color: #103b97;
          line-height: 24px;
          text-align: center;
          font-style: normal;
          text-transform: none;
          border: none;
          transition: all 0.3s;
          border: 1px solid #c0edff;
        }
      }
    }
    .table {
      margin-top: 30px;
      .tab {
        height: 40px;
        line-height: 40px;
        background: #4cc1ef;
        border-top-left-radius: 23px;
        border-top-right-radius: 23px;
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        color: #fff;
        font-size: 15px;
        span {
          display: inline-block;
        }
      }
      .item-wrap {
        height: 350px;
      }
      .el-scrollbar {
        height: 100%;
      }
      .item {
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        color: #000;
        font-size: 15px;
        background: #c0edff;
        &:nth-child(2n-1) {
          background: #fff;
        }
        span {
          display: inline-block;
          font-size: 12px;
        }
        .sort {
          width: 55px;
          text-align: center;
          position: relative;
          left: -6px;
        }
        .name {
          position: relative;
          left: -6px;
          text-align: center;
          width: 50px;
        }
        .project {
          position: relative;
          left: -16px;
          width: 90px;
          height: 40px;
          line-height: normal;
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          text-align: center;
          // word-wrap: break-word;
        }
        .result {
          text-align: center;
          width: 40px;
          position: relative;
          left: -20px;
        }
        .type {
          position: relative;
          left: -6px;
        }
        .time {
        }
      }
    }
  }
}
</style>
